/**
 * Created by hejg on 2018/5/21.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableHighlight
} from 'react-native';
import {observer} from 'mobx-react/native';
import Echarts from 'native-echarts';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import Indicator from '../../../components/Indicator';
import DropDown from '../../../components/DropDown';
import Style from '../../../components/Style';
import Tool from '../../../components/Tool';

@observer
export default class ProgressPart extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        let part = this.props.store;
        if (part.periodOptions.length < 1) {
            part.showIndicator();
            this._loadScreenData();
            this._loadOrganizeList();
        }
    }

    _loadScreenData() {
        let _this = this;
        let part = this.props.store;
        var qr_params = "opTime=" + part.params.opTime + "&orgId=" + part.params.orgId;
        // console.warn(qr_params);
        part.showIndicator();
        Tool.fetchAjax(Tool.appPath.mkst + 'indexCollect/getAllIndexCollectByTimeOrg', qr_params, function (data) {
            if (data.state) {
                part.setSelectExpand(-1, {});
                part.setScreenData(data.info.info);
                part.setPeriodOptions(data.info.period);
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {
            part.hiddenIndicator();
        });
    }

    _loadOrganizeList() {
        let _this = this;
        let part = this.props.store;
        Tool.fetchAjax(Tool.appPath.mkst + 'advertise/selectOrg', '', function (data) {
            if (data.state) {
                part.setOrganizeOptions(data.info);
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {

        });
    }

    _loadExpandData(indexCode, index) {
        alert(indexCode+"----"+index);
        let _this = this;
        let part = this.props.store;
        if (index === part.selectExpand) {
            part.setSelectExpand(-1, {});
            return;
        }
        if (!part.params.opTime) {//默认情况查询条件中日期值为空时触发
            part.setParams(Object.assign({}, part.params, {opTime: part.periodOptions[part.selectPeriod].value}));
        }
        var qr_params = "opTime=" + part.params.opTime + "&orgId=" + part.params.orgId + "&indexCode=" + indexCode;
        // console.warn(qr_params);
        part.showIndicator();
        Tool.fetchAjax(Tool.appPath.mkst + 'indexCollect/getIndexCollectDetail', qr_params, function (data) {
            if (data.state) {
                part.setSelectExpand(index, data.info);
                // console.warn(JSON.stringify(data.info));
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {
            part.hiddenIndicator();
        });

    }

    _changeOrganizeItem(index) {
        let part = this.props.store;
        part.setSelectOrganize(index);
        part.setParams(Object.assign({}, part.params, {orgId: part.organizeOptions[index].value}));
        this._loadScreenData();
    }

    _changePeriodItem(index) {
        let part = this.props.store;
        part.setSelectPeriod(index);
        part.setParams(Object.assign({}, part.params, {opTime: part.periodOptions[index].value}));
        this._loadScreenData();
    }

    render() {
        let part = this.props.store;
        return (<View style={{flex:1}}>
                <ScrollView>
                    <View>
                        {/*<View style={{flexDirection:'row',marginTop:10}}>
                            <DropDown color={Style.color.green}
                                      title="请选择归属"
                                      defaultIndex={part.selectOrganize}
                                      onConfirm={(index)=>this._changeOrganizeItem(index)}
                                      data={part.organizeOptions.slice()}/>
                            <DropDown color={Style.color.yellow}
                                      title="请选择账期"
                                      defaultIndex={part.selectPeriod}
                                      onConfirm={(index)=>this._changePeriodItem(index)}
                                      data={part.periodOptions.slice()}/>
                        </View>*/}
                        {part.effectiveScreenData ?
                            <View>
                                {
                                    part.screenData.map((item, index) => <View><ProgressPartItem title={item.INDEX_NAME}
                                                                                           ratio={item.REVENUE_SHARE}
                                                                                           expand={index === part.selectExpand}
                                                                                           onPress={()=> {this._loadExpandData(item.INDEX_CODE,index)}}
                                                                                           store={part}
                                                                                           key={`ProgressPartItem_${item.INDEX_CODE}`}/>
                                        <ProgressPartItem title={item.INDEX_NAME}
                                    ratio={item.REVENUE_SHARE}
                                    expand={index === part.selectExpand}
                                    onPress={()=> {this._loadExpandData(item.INDEX_CODE,index)}}
                                    store={part}
                                    key={`ProgressPartItem_${item.INDEX_CODE}`}/>
                                        </View>
                                    )
                                }
                            </View>
                            :
                            <View style={{height: 200, marginTop: 10}}>
                                <Indicator isVisible={true} message={Style.tip.noData} type="none" styleType={1}/>
                            </View>
                        }
                    </View>
                </ScrollView>
                <Indicator isVisible={part.indicatorVisible} message={part.indicatorMessage}/>
            </View>
        );
    }
}

class ProgressPartItem extends Component {
    render() {
        return (
            <View style={{marginBottom:10}}>
                <TouchableHighlight onPress={()=>{this.props.onPress()}}
                                    underlayColor={Style.color.lightGray}
                                    style={{backgroundColor:Style.color.white,}}>
                    <View style={[styles.ProgressHeaderView,{height:Style.css.listHeight,justifyContent:'space-between'}]}>
                        <View style={{flex:1,paddingLeft:20,flexDirection:'column',}}>
                            <Text style={styles.ProgressHeaderTitle}>{this.props.title}</Text>
                            <View style={{flexDirection:'row'}}>
                                <Text>贡献度:</Text>
                                <Text style={{color:Style.color.heightBlue}}>12%</Text>
                            </View>
                        </View>
                        <View style={styles.ProgressHeaderRatioView}>
                            <Text>年度完成率</Text>
                            <Text style={styles.ProgressHeaderRatioValue}>{Tool.numberFormat(this.props.ratio * 100, 2)}%</Text>
                        </View>
                        <View style={styles.ProgressHeaderExpandView}>
                            <EvilIcons name={`chevron-${this.props.expand ? 'down' : 'right'}`} size={30}
                                       color={Style.color.gray}/>
                        </View>
                    </View>
                </TouchableHighlight>
                {this.props.expand ? <ProgressItemDetail store={this.props.store}/> : null }
            </View>
        );
    }
}

class ProgressItemDetail extends Component {
    render() {
        let part = this.props.store;
        return (
            <View style={styles.ItemDetailView}>
                <View style={styles.ItemDetailSedView}>
                    <ItemDetailIndex title="当月完成率"
                                     value={part.expandData.info.monthlyIncome}
                                     ratio={part.expandData.info.monthlyIncomeCompletion}
                                     color={Style.color.blue}/>
                    <ItemDetailIndex title='通信信息化增量贡献度'
                                     value={part.expandData.info.totleIncome}
                                     ratio={part.expandData.info.totleIncomeCompletion}
                                     color={Style.color.green}/>
                </View>
                <View style={styles.ItemDetailSedView}>
                    <ItemDetailIndex title="当月完成率"
                                     value={part.expandData.info.monthlyIncome}
                                     ratio={part.expandData.info.monthlyIncomeCompletion}
                                     color={Style.color.blue}/>
                    <ItemDetailIndex title='通信信息化增量贡献度'
                                     value={part.expandData.info.totleIncome}
                                     ratio={part.expandData.info.totleIncomeCompletion}
                                     color={Style.color.green}/>
                </View>
                <View>
                    <View style={styles.charsTitle}><Text>近一年趋势变化</Text></View>
                    <View style={{marginLeft:10,marginRight:10,backgroundColor:Style.color.white}}>
                        <Echarts option={part.expandData.lineOption} height={180} width={Style.css.width}/>
                    </View>
                </View>
            </View>
        );
    }
}

class ItemDetailIndex extends Component {
    render() {
        return (
            <View style={[styles.ItemDetailIndexView,{borderRightWidth:2, borderColor:Style.color.gray, borderStyle:'dotted'}]}>
                <Text>{this.props.title}</Text>
                <Text style={styles.ItemDetailIndexValue}>{Tool.numberFormat(this.props.value, 2)}</Text>
               {/* <View style={[styles.ItemDetailIndexRatioView,{backgroundColor: this.props.color}]}>
                    <Text style={styles.ItemDetailIndexRatio}>{Tool.numberFormat(this.props.ratio * 100, 2)}%</Text>
                </View>*/}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Style.color.screen
    },
    ProgressHeaderView: {
        flexDirection: 'row', justifyContent: 'center', alignItems: 'center',marginVertical: 5
    },
    ProgressHeaderIcon: {
        width: 3,
        height: '60%',
        backgroundColor: Style.color.blue,
        borderTopRightRadius: 20,
        borderBottomRightRadius: 20
    },
    ProgressHeaderTitle: {
        fontSize: Style.fontSize.normal, color: Style.color.black, fontWeight: 'bold'
    },
    ProgressHeaderRatioView: {
        marginHorizontal: 10,
        paddingVertical: 1,
        paddingHorizontal: 10,
        flexDirection:'column',
        justifyContent:'space-between'
    },
    ProgressHeaderRatioValue: {
        color: Style.color.lightRed, fontSize: Style.fontSize.normal
    },
    ProgressHeaderExpandView: {
       paddingVertical: 6
    },
    ItemDetailView: {
        borderColor: Style.color.heightGray, borderTopWidth: 1,
    },
    ItemDetailSedView: {
        flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
        backgroundColor:Style.color.heightGray
    },
    ItemDetailIndexView: {
       width:'50%', justifyContent: 'center', alignItems: 'center', marginVertical: 10
    },
    ItemDetailIndexTitle: {
        fontSize: Style.fontSize.small,
    },
    ItemDetailIndexValue: {
        fontSize: Style.fontSize.normal,
        color: Style.color.heightBlue,
        fontWeight: 'bold',
        marginVertical: 5
        ,
    },
    ItemDetailIndexRatioView: {
        paddingVertical: 1,
        paddingHorizontal: 10,
        borderRadius: 10
    },
    ItemDetailIndexRatio: {
        fontSize: Style.fontSize.small, color: Style.color.white
    },
    charsTitle:{
        justifyContent:'center',alignItems:'center',
        borderBottomWidth:1,borderColor:Style.color.lightGray,borderStyle:'dotted',
        height:30,backgroundColor:Style.color.white
    }
});